<template>
   <div>
     <div class="btn_box" style="margin: 20px 0">
       <el-button type="primary" @click="handleAdd">添加专业</el-button>
     </div>
     <el-table :data="majorss" height="380" border style="width: 100%">
       <el-table-column type="index" label="序号" width="60"> </el-table-column>
       <el-table-column prop="majorsname" label="专业名称"> </el-table-column>
       <el-table-column label="操作" width="250">
         <template slot-scope="scope">
           <el-button size="mini" @click="handleEdit(scope.row._id)"
             >编辑</el-button
           >
           <el-button
             size="mini"
             type="danger"
             @click="handleDele(scope.row._id)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page.sync="currentPage"
       :page-sizes="[5, 10, 15, 20]"
       :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
     >
     </el-pagination>
     <!-- 添加/编辑弹窗 -->
     <el-dialog title="专业编辑" :visible.sync="majorsFormVisible" width="500px">
       <el-form
         :model="majors"
         ref="majorsForm"
         label-width="100px"
         label-position="right"
         style="width: 400px"
         :rules="rules"
       >
         <el-form-item label="专业名称" prop="majorsname">
           <el-input
             v-model="majors.majorsname"
             placeholder="请输入专业名称"
           ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="majorsFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="majors._id==null ? addData('majorsForm') : updateData('majorsForm')">确 定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 
 <script>
 import { formateDate } from "@/utils/dateUtils.js";
 import majorsApi from "@/api/majors";
 export default {
   data() {
     return {
       majorsFormVisible: false,
       currentPage: 1,
       totalPage:1,
       pageSize: 5,
       total: 0,
       majorss: [],
       majors: {
         _id: null,
           majorsname: "",
       },
       roleOptions: [],
       rules: {
         majorsname: [
           {
             required: true,
             message: "专业名称必须输入",
             trigger: ["blur", "change"],
           },
         ],
       },
     };
   },
 
   components: {},
   mounted() {
     this.fetchmajors();
   },
   methods: {
     addData(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           majorsApi.add(this.majors).then(res=>{
             const resp = res.data
             if(resp.status == 0){
               this.$message({
                 type:'success',
                 message:'添加专业成功咯！'
               })
               this.majorsFormVisible = false
               this.fetchmajors()
             }
           })
         } else {
           return false;
         }
       });
     },
     updateData(formName){
       this.$refs[formName].validate((valid) => {
         if (valid) {
           majorsApi.update(this.majors).then(res=>{
             const resp = res.data
             if(resp.status == 0){
               this.$message({
                 type:'success',
                 message:'修改专业信息成功咯！'
               })
               this.majorsFormVisible = false
               this.fetchmajors()
             }
           })
         } else {
           return false;
         }
       });
     },
     handleAdd() {
       this.majors = {
           _id: null,
           majorsname: "",
         };
       this.majorsFormVisible = true;
       this.$nextTick(() => {
         this.$refs["majorsForm"].resetFields();
         
       });
     },
     fetchmajors() {
       if(this.currentPage>Math.ceil(this.totalPage)){
         this.currentPage=Math.ceil(this.totalPage)
       }
       majorsApi.getmajorsList(this.currentPage, this.pageSize).then((res) => {
         const resp = res.data;
         if (resp.status == 0) {
           this.majorss = resp.data.data;
           this.total =resp.data.total;
           this.roleOptions = resp.data.roles;
           this.totalPage = this.total/this.pageSize
         }
       });
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.pageSize = val;
       this.fetchmajors()
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.currentPage = val;
       this.fetchmajors()
     },
     reseDate(row, column, cellValue, index) {
       return formateDate(cellValue);
     },
     handleEdit(_id) {
       this.handleAdd();
       majorsApi.getByid(_id).then((res)=>{
         const resp = res.data;
         console.log(resp.data);
         if(resp.status==0){
           this.majors=resp.data
           
         }
 
       })
     },
     handleDele(id) {
       console.log("删除");
       this.$confirm("确认删除这条记录吗？","提示",{
         confirmButtonText:"确定",
         cancelButtonText:"取消",
         type:"warning"
       }).then(()=>{
         majorsApi.deleteByid(id).then((res)=>{
           const resp = res.data;
           console.log(resp.data);
         if(resp.status==0){
           this.$message({
                 type:'success',
                 message:'删除专业成功咯！'
               })
               this.totalPage = (this.total-1)/this.pageSize
               this.fetchmajors()
           
         }
         })
       })
     },
     formatRole(row, column, cellValue, index) {
       const role = this.roleOptions.find((item) => item.id === cellValue) || {};
       return role.name;
     },
   },
 };
 </script>
 
 <style scoped>
 </style>